<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>管理界面</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container mt-5">
    <h1 class="text-center">管理界面</h1>

    <!-- 环形进度条 -->
    <div class="progress">
        <div class="progress-bar progress-bar-striped" role="progressbar"
             style="width: {{ (submitted_students / total_students) * 100 }}%;" aria-valuenow="{{ submitted_students }}"
             aria-valuemin="0" aria-valuemax="{{ total_students }}">
            {{ (submitted_students / total_students) * 100 }}%
        </div>
    </div>

    <!-- 显示未提交学号的框 -->
    <div class="mt-3">
        <h2>未提交的学号：</h2>
        <ul>
            {% for student in unsubmitted_students %}
                <li>{{ student }}</li>
            {% endfor %}
        </ul>
    </div>

    <!-- 按钮 -->
    <button id="calculate-button" class="btn btn-primary mt-3" {% if button_disabled %}disabled{% endif %}>开始计算
    </button>

    <!-- 显示计算结果 -->
    <div id="calculation-result" class="mt-3">
        <!-- 这里显示计算结果的内容 -->
    </div>
</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="{{ url_for('static', filename='js/scripts.js') }}"></script>
</body>
<footer style="position: fixed; bottom: 0; left: 0; right: 0; text-align: center; padding: 10px 0;">
    <div>
        Support by <a class="footer" href="https://github.com/FoxSuzuran">FoxSuzuran</a>
    </div>
</footer>
</html>
